<template>
    <!-- 显示作者(频道)信息的组件之一 -->
    <div class="author1-component-container">
        <div class="author1-component-head">
            <img v-lazy="channelInfo.hostUserIcon + '?x-oss-process=image/resize,w_150'"/>
        </div>
        <div class="author1-component-info">
            <div class="author1-component-title">
                <a href="Javascript:;">{{channelInfo.name}}</a>
            </div>
            <div class="author1-component-data">
                {{this.toCommonTime(info.sorttime)}}&nbsp;&nbsp;
                <img src="../assets/images/eye.png"/>&nbsp;{{this.simpleNum(info.pv)}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            channelInfo: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style>
    .author1-component-container {
        height: 2.4rem;
        margin: 1.0rem auto;
    }

    .author1-component-head, .author1-component-info {
        height: 2.4rem;
        float: left;
    }

    .author1-component-head {
        width: 2.4rem;
    }

    .author1-component-head img {
        display: block;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        object-fit: cover;
    }

    .author1-component-info {
        margin-left: 0.8rem;
        font-size: 0.9rem;
    }

    .author1-component-title, .author1-component-info {
        line-height: 1.2rem;
    }

    .author1-component-title a,
    .author1-component-title a:link,
    .author1-component-title a:visited {
        text-decoration: none;
        color: #459AF5;
    }

    .author1-component-info {
        color: #999999;
    }

    .author1-component-data {
    }

    .author1-component-data img {
        height: 1.0rem;
        vertical-align: middle;
    }
</style>